<template>
	<view class="page">
		<view class="houseList flex flex-direction">
			<view class="house-nav">
				<view @click="openPicker('xqId')" class="house-nav-item flex align-center justify-between">
					<view class="nav-text">{{ selectList[0].label || '小区' }}</view>
					<view class="nav-icon">
						<u-icon name="arrow-down" color="#2D2C3C" size="14"></u-icon>
					</view>
				</view>
				<view @click="openPicker('buildingId')" class="house-nav-item flex align-center justify-between">
					<view class="nav-text">{{ selectList[1].label || '楼栋' }}</view>
					<view class="nav-icon">
						<u-icon name="arrow-down" color="#2D2C3C" size="14"></u-icon>
					</view>
				</view>
				<view @click="openPicker('unitId')" class="house-nav-item flex align-center justify-between">
					<view class="nav-text">{{ selectList[2].label || '单元' }}</view>
					<view class="nav-icon">
						<u-icon name="arrow-down" color="#2D2C3C" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view class="house-content">
				<template v-show="houseList.length > 0">
					<view v-for="(items, index) in houseList" :key="index" class="list-container">
						<view class="list-title flex flex-direction align-center justify-center">
							<view>{{ items.buildName }}</view>
							<view>层</view>
						</view>
						<view class="list-item">
							<view
								v-for="cell in items.list"
								:key="cell.id"
								@click="openForm(cell.id)"
								:style="{ backgroundColor: houseColor[cell.houseStatus] }"
								class="flex-center cell"
							>
								<view>{{ cell.name }}</view>
								<view class="text">{{ cell.residentNum || 0 }}</view>
								<view class="tag-list">
									<view class="tag" v-for="(item, index) in cell.peopleTag">{{ getValue(item) }}</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<view class="empty-data" v-show="houseList.length == 0">
					<u-empty mode="data" text="暂无房屋数据"></u-empty>
				</view>
			</view>
			<view class="example">
				<view v-for="(item, index) in houseType" :key="index" class="flex">
					<text>{{ item.label }}</text>
					<span :style="{ backgroundColor: houseColor[index] }" class="example-tag"></span>
				</view>
			</view>
			<view class="space-block"></view>
		</view>
		<u-picker :show="show" :default-selector='[0]' :columns="columns" keyName="label" @cancel="show = false" @confirm="confirmPicker"></u-picker>
		<checkForm v-model="showCheck" :houseId="houseId" @success="setHouseData(selectList[2].id)"></checkForm>
	</view>
</template>

<script>
import * as HouseApi from '@/api/house.js'
import * as DictApi from '@/api/system/dict.js'
import checkForm from './checkForm.vue'
export default {
	components: {
		checkForm
	},
	data() {
		return {
			userId: this.$store.state.user.userInfo.userId,
			deptId: 120,
			show: false,
			columns: [],
			pickerType: '',
			xqList: [],
			buildList: [],
			unitList: [],
			selectList: [{}, {}, {}],
			houseList: [],
			houseColor: ['#AAAAAA', '#03A1E5', '#F61935', '#FDD532', '#65F114'],
			houseType: [],
			showCheck: false,
			houseId: '',
			people_label: []
		}
	},
	created() {
		// this.setHouseData(1464)
		this.getXqList(true)
		this.getTypeList()
	},
	methods: {
		getValue(value) {
			const list = this.people_label
			if (!list || list.length == 0) return ''
			const index = list.findIndex((ele) => ele.value == value)
			return index > -1 ? list[index].label.slice(0, 1) : ''
		},
		getTypeList() {
			DictApi.getTypeList({ dictTypeList: ['house_status', 'people_label'] }).then((res) => {
				this.houseType = res.data.house_status
				this.people_label = res.data.people_label
			})
		},
		openForm(id) {
			console.log(id)
			this.showCheck = true
			this.houseId = id
		},
		openPicker(e) {
			this.show = true
			this.pickerType = e
			switch (e) {
				case 'xqId':
					this.columns = [this.xqList]
					break
				case 'buildingId':
					this.columns = [this.buildList]
					break
				case 'unitId':
					this.columns = [this.unitList]
					break
			}
		},
		getChilren(type, id, init) {
			const data = {
				xqId: type == 'xq' ? id : '',
				buildingId: type == 'xq' ? '' : id
			}
			HouseApi.getAppGridHouse(data).then((res) => {
				if (type == 'xq') {
					this.buildList = res.data.map((ele, index) => {
						const item = { label: ele.buildingName, id: ele.buildingId }
						if (init && !index) {
							this.selectList[1] = item
							this.getChilren('build', item.id, true)
						}
						return item
					})
          if(!init) {
            this.openPicker('buildingId')
          }
				} else {
					this.unitList = res.data.map((ele, index) => {
						const item = { label: ele.unitName, id: ele.unitId }
						if (init && !index) {
							this.selectList[2] = item
							this.setHouseData(item.id)
						}
						return item
					})
          if(!init) {
            this.openPicker('unitId')
          }
				}
			})
		},
		getXqList(init) {
			HouseApi.getAppGridHouse({
				// deptId: this.deptId
			}).then((res) => {
				this.xqList = res.data.map((ele, index) => {
					const item = { label: ele.xqName, id: ele.xqId }
					if (init && !index) {
						this.selectList[0] = item
						this.getChilren('xq', item.id, true)
					}
					return item
				})
			})
		},
		confirmPicker(e) {
			const item = e.value[0]
			switch (this.pickerType) {
				case 'xqId':
					this.selectList = [item, {}, {}]
					this.getChilren('xq', item.id)
					break
				case 'buildingId':
					this.selectList[1] = item
					this.selectList[2] = {}
					this.getChilren('build', item.id)
					break
				case 'unitId':
					this.selectList[2] = item
					this.setHouseData(item.id)
					this.show = false
					break
			}
		},
		setHouseData(id) {
			HouseApi.getHouseList({ unitId: id, deptId: this.deptId })
				.then((res) => {
					let data = res.data
					const map = data
						.map((item) => {
							 if(!item.floor){
							      item.build = item.name.length == 3 ? item.name.slice(0, 1) : item.name.slice(0, 2)
							    }else{
							      item.build = item.floor
							    }
							// item.build = item.name.length == 3 ? item.name.slice(0, 1) : item.name.slice(0, 2)
							item.house = item.name.slice(-2)
							return item
						})
						.sort((a, b) => a.name - b.name)
						.sort((a, b) => b.build - a.build)
					const datamap = []
					map.forEach((value) => {
						const index = datamap.findIndex((item) => item.buildName == value.build)
						index == -1
							? datamap.push({
									buildName: value.build,
									list: [value]
							  })
							: datamap[index].list.push(value)
					})
					this.houseList = datamap
				})
				.catch((error) => {
					reject(error)
				})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.page {
	height: 100vh;
	overflow-y: hidden;
}
.houseList {
	height: 100vh;
	overflow-y: hidden;
	color: #fff;
	.house-nav {
		display: grid;
		grid-template-columns: 320rpx 170rpx 170rpx;
		grid-column-gap: 20rpx;
		text-align: center;
		padding: 20rpx;
		background-color: #f5f8fd;
		color: #2d2c3c;
	}

	.house-nav-item {
		line-height: 1;
		height: 80rpx;
		padding: 10rpx;
		border-radius: 8rpx;
		background: #ffffff;
		box-sizing: border-box;
		position: relative;
		.nav-text {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.nav-icon {
			position: absolute;
			top: 22rpx;
			right: 10rpx;
		}
	}
	.house-content {
		flex: 1;
		overflow-y: scroll;
		background-color: #f5f8fd;
	}
	.flex-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.list-container {
		display: flex;
		margin: 20rpx;
		border-radius: 8rpx;
		background-color: #fff;
		font-size: 28rpx;
		overflow: hidden;
		.list-title {
			width: 80rpx;
			min-height: 100%;
			background-color: #649dfb;
		}
		.list-item {
			background-color: #fff;
			display: grid;
			grid-template-columns: repeat(4, 120rpx);
			grid-template-rows: 120rpx;
			grid-row-gap: 20rpx;
			grid-column-gap: 30rpx;
			margin: 20rpx 30rpx;
			.cell {
				text-align: center;
				border-radius: 4rpx;
				background-color: #c45656;
				font-size: 24rpx;
				position: relative;
				padding-top: 10rpx;
			}
			.text {
				font-size: 44rpx;
				font-weight: bold;
			}

			.tag-list {
				position: absolute;
				right: -12rpx;
				top: -14rpx;
				display: flex;

				.tag {
					background-color: #3dc4ff;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 2rpx;
					border: 2px solid #ffffff;
				}
			}
		}
	}
	.flex {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.example {
		display: grid;
		grid-template-columns: 240rpx 200rpx 200rpx;
		grid-template-rows: 60rpx;
		grid-row-gap: 20rpx;
		grid-column-gap: 30rpx;
		padding: 20rpx 0rpx 20rpx 20rpx;
		color: #666666;
		font-size: 24rpx;
		border-radius: 8rpx;
		.example-tag {
			display: inline-block;
			margin-left: 15rpx;
			width: 40px;
			height: 20px;
			border-radius: 2px;
		}
	}
	.space-block {
		width: 100%;
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
	}
	.empty-data {
		margin-top: 30%;
		flex: 1;
	}
}
</style>
